$(document).ready(function() {
//    my_particles();
    cube();
});

function tutorial() {
    var container, stats;
    var camera, scene, renderer, group, particle;
    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;
    var canvasSizeX = window.innerWidth-100
    var canvasSizeY = window.innerHeight-100;
    console.log("canvas size: "+canvasSizeX+"x"+canvasSizeY);
    
    var cubeSize = canvasSizeY-50;
    
    init();
    animate();

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        scene.add( camera );
        
}

    
function my_particles() {
    var container, stats;
    var camera, scene, renderer, group, particle;
    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;
    var canvasSizeX = window.innerWidth-100
    var canvasSizeY = window.innerHeight-100;
    console.log("canvas size: "+canvasSizeX+"x"+canvasSizeY);
    
    var cubeSize = canvasSizeY-50;
    
    init();
    animate();

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        scene.add( camera );
        
        geometry = new THREE.CubeGeometry( cubeSize, cubeSize, cubeSize );
        material = new THREE.MeshBasicMaterial( { wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
        
        var PI2 = Math.PI * 2;
        var program = function ( context ) {

            context.beginPath();
            context.arc( 0, 0, 0.5, 0, PI2, true );
            context.closePath();
            context.fill();

        }

        group = new THREE.Object3D();
        scene.add( group );

        for ( var i = 0; i < cubeSize/2 ; i++ ) {

            particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
                color: Math.random() * 0x808008 + 0x808080, 
                program: program
            } ) );
            particle.position.x = Math.random() * (cubeSize) - cubeSize/2;
            particle.position.y = Math.random() * (cubeSize) - cubeSize/2;
            particle.position.z = Math.random() * (cubeSize) - cubeSize/2;
//            particle.position.x = i;
//            particle.position.y = i;
//            particle.position.z = i;
            console.log( particle.position.x+" "+ particle.position.y+" "+ particle.position.z);
//            particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
            particle.scale.x = particle.scale.y = 5;
            group.add( particle );
//        geometry = new THREE.CubeGeometry( 200, 200, 200 );
//        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
//
//        mesh = new THREE.Mesh( geometry, material );
//        scene.add( mesh );
        }

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth-100, window.innerHeight-100 );
//        renderer.setSize( 500, 500 );
        container.appendChild( renderer.domElement );

        stats = new Stats();
        stats.getDomElement().style.position = 'absolute';
        stats.getDomElement().style.top = '0px';
        container.appendChild( stats.getDomElement() );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

    }

    //

    function onDocumentMouseMove( event ) {

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;
    }

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * 0.1;
        camera.position.y += ( - mouseY - camera.position.y ) * 0.1;
        camera.lookAt( scene.position );
//        console.log(camera.position.x+" "+camera.position.y);

//        group.rotation.x += 0.01;
//        group.rotation.y += 0.02;

        renderer.render( scene, camera );

    }
}
function particles_random() {
    var container, stats;
    var camera, scene, renderer, group, particle;
    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    init();
    animate();

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        scene.add( camera );

        var PI2 = Math.PI * 2;
        var program = function ( context ) {

            context.beginPath();
            context.arc( 0, 0, 1, 0, PI2, true );
            context.closePath();
            context.fill();

        }

        group = new THREE.Object3D();
        scene.add( group );

        for ( var i = 0; i < 100; i++ ) {

            particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
                color: Math.random() * 0x808008 + 0x808080, 
                program: program
            } ) );
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
//            particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
            particle.scale.x = particle.scale.y = 5;
            group.add( particle );
        }

        renderer = new THREE.CanvasRenderer();
//        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setSize( 500, 500 );
        container.appendChild( renderer.domElement );

        stats = new Stats();
        stats.getDomElement().style.position = 'absolute';
        stats.getDomElement().style.top = '0px';
        container.appendChild( stats.getDomElement() );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

    }

    //

    function onDocumentMouseMove( event ) {

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;
    }

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * 0.05;
        camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
        camera.lookAt( scene.position );

//        group.rotation.x += 0.01;
//        group.rotation.y += 0.02;

        renderer.render( scene, camera );

    }
}
    
function cube() {
    var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;
        scene.add( camera );

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame( animate );
        render();

    }

    function render() {

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }
}